<template>
  <div class="proxy-box-1">
    <div class="proxy-comm-box full-flex mr-20">
      <div class="title">
        Residential Proxies
        <div class="btns">
          <a href="https://t.me/IPXProxyService" target="_blank" class="a-btn">Contact Sales</a>
          <a href="javascript:void(0);" class="a-btn" @click="toBuy()">Residential package</a>
        </div>
      </div>
      <div class="tc-main">
        <div class="item">
          <img src="@/assets/houtai_2_03.png" alt="" class="image" />
          <div class="info">
            <p>
              <span>{{ formatTraffic(getUserInfo.traffic).traffic }}</span> {{ formatTraffic(getUserInfo.traffic).unit }}
            </p>
            <p>Remaining traffic</p>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/houtai_2_05.png" alt="" class="image" />
          <div class="info">
            <p>
              <span>{{ formatTraffic(getUserInfo.total_traffic).traffic }}</span> {{ formatTraffic(getUserInfo.total_traffic).unit }}
            </p>
            <p>Cumulative recharge traffic</p>
          </div>
        </div>
        <div class="item">
          <img src="@/assets/houtai_2_07.png" alt="" class="image" />
          <div class="info">
            <p>
              <span>{{ formatTraffic(getUserInfo.consume_traffic).traffic }}</span> {{ formatTraffic(getUserInfo.consume_traffic).unit }}
            </p>
            <p>Cumulative consume traffic</p>
          </div>
        </div>
      </div>
      <div class="ctrl-box">
        <a href="javascript:void(0);" class="cb-btn" @click="toRotatingResidential('1')">Generate record</a>
        <a href="javascript:void(0);" class="cb-btn" @click="toRechargeDetails('1')">Purchase record</a>
      </div>
    </div>
    <div class="proxy-comm-box proxy-right">
      <div class="pr-user-info">
        <img src="@/assets/ipx-proxy_user-01.png" class="ui-img" />
        <div class="ui-main">
          <p class="welcome">Wellcome!</p>
          <p class="name">{{ getUserInfo.email }}</p>
        </div>
        <a href="javascript:void(0);" class="change-pwd-btn" @click="toPersonal()">Change Password</a>
      </div>
      <div class="pr-user-tips">
        <p class="p1">TIPS:In order to ensure the security of your account, please keep your account password safe!</p>
        <p class="p2">All of the proxies should be used in the network outside of mainland China.</p>
      </div>
    </div>
  </div>

  <div class="proxy-box-1">
    <div class="proxy-comm-box full-flex mr-20">
      <div class="title">
        Static Residential Proxies
        <div class="btns">
          <a href="javascript:void(0);" class="a-btn" @click="toStaticResidential('1')">Residential Package</a>
        </div>
      </div>
      <div class="tc-main">
        <div class="item bg-ip">
          <img src="@/assets/houtai_06_1.png" alt="" class="image" />
          <div class="info">
            <p><span>{{ getUserInfo.static_proxy?.valid_count }}</span> 个</p>
            <p>Available proxy</p>
          </div>
        </div>
        <div class="item bg-ip">
          <img src="@/assets/houtai_06_2.png" alt="" class="image" />
          <div class="info">
            <p><span>{{ getUserInfo.static_proxy?.soon_expire_count }}</span> 个</p>
            <p>Will expire proxy</p>
          </div>
        </div>
      </div>
      <div class="ctrl-box">
        <a href="javascript:void(0);" class="cb-btn" @click="toStaticResidential('2')">Renewal upon expiration</a>
        <a href="javascript:void(0);" class="cb-btn" @click="toRechargeDetails('2')">Purchase record</a>
      </div>
    </div>
    <el-carousel class="proxy-right-carousel">
      <el-carousel-item>
        <div class="prc-item">
          <a href="https://admin.n69.club/register?code=dfde2e" target="_blank">
            <img src="@/assets/banner/en.png" alt="" class="image" />
          </a>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>

  <div class="proxy-box-1">
    <div class="proxy-comm-box full-flex">
      <div class="title">FAQ</div>
      <div class="question-wrap">
        <el-collapse v-model="currentActive" accordion class="question-list">
          <el-collapse-item title="Do you support free testing?" name="1">
            <template #title>
              <h6 class="question-list-title">
                <strong>Do you support free testing?</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>In order to prevent IP abuse, IPXProxy's residential proxies currently do not provide any free testing services.</div>
          </el-collapse-item>
          <el-collapse-item title="How many devices can be connected to one line?" name="3">
            <template #title>
              <h6 class="question-list-title">
                <strong>How many devices can be connected to one line?</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>IPXProxy does not limit concurrency, but the bandwidth of a line is limited, and connecting too many devices may cause network instability.</div>
          </el-collapse-item>
          <el-collapse-item title="What total protocols does your agent support?" name="5">
            <template #title>
              <h6 class="question-list-title">
                <strong>What total protocols does your agent support?</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>Supports HTTP(s) / SOCKS5 protocol. When performing proxy work, just set the requested protocol and proxy directly.</div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse v-model="currentActive" accordion class="question-list">
          <el-collapse-item title="Do IPXProxy Residential Proxies automatically rotate?" name="2">
            <template #title>
              <h6 class="question-list-title">
                <strong>Do IPXProxy Residential Proxies automatically rotate?</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>Absolutely. By default, IPXProxy Residential Proxies are designed to rotate. Instead of offering a single, unchanging IP like static proxies, our rotating residential proxies give you a wide range of IP addresses to access. This ensures that you’re assigned a fresh, random IP at specified or random intervals based on your session preferences.</div>
          </el-collapse-item>
          <el-collapse-item title="How is bandwidth and request usage calculated in billing?" name="4">
            <template #title>
              <h6 class="question-list-title">
                <strong>How is bandwidth and request usage calculated in billing?</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>In our billing model, the bandwidth usage is calculated as the sum of data transmitted to and from the target site, which includes request headers, request data, response headers, and response data. For request-based plans, we only charge for successful requests.</div>
          </el-collapse-item>
          <el-collapse-item title="What should I do if my recharge does not arrive?" name="6">
            <template #title>
              <h6 class="question-list-title">
                <strong>What should I do if my recharge does not arrive?</strong>
                <i class="el-icon el-icon-plus"><Plus /></i>
                <i class="el-icon el-icon-minus"><Minus /></i>
              </h6>
            </template>
            <div>After recharging, you generally need to wait for the system to check in real time, there is a certain time delay for the balance to arrive in the account, usually 1-10 minutes, please wait a moment and then refresh to check.If your order has not arrived in more than 10 minutes, you can contact the official customer service, provide payment records, customer service will be happy to help you check the reason.</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { formatTraffic } from '@/utils/index';
  import { Plus, Minus } from '@element-plus/icons-vue';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const props = defineProps<{
    data: Array;
  }>();

  const emits = defineEmits<{
    (event: 'confirm'): void;
  }>();

  const currentActive = ref('');

  const toBuy = () => {
    router.push({
      path: '/center/buy',
      query: {
        t: new Date().getTime(),
      },
    });
  };

  const toProxy = () => {
    router.push({
      path: '/center/proxy',
      query: {
        t: new Date().getTime(),
      },
    });
  };

  const toRecord = (name) => {
    router.push({
      path: '/center/record',
      query: {
        name,
        t: new Date().getTime(),
      },
    });
  };

  const toPersonal = () => {
    router.push({
      path: '/user/personal',
      query: {
        t: new Date().getTime(),
      },
    });
  };

  const toRotatingResidential = (name) => {
    router.push({
      path: '/center/rotatingResidential',
      query: {
        name,
        t: new Date().getTime(),
      },
    });
  };

  const toStaticResidential = (name) => {
    router.push({
      path: '/center/staticResidential',
      query: {
        name,
        t: new Date().getTime(),
      },
    });
  };

  const toRechargeDetails = (name) => {
    router.push({
      path: '/center/rechargeDetails',
      query: {
        name,
        t: new Date().getTime(),
      },
    });
  };
  
  const openSoonExpireMessage = (count) => {
    if (!count) return;
    ElMessageBox.alert(
      `<div style="padding:8px 0;"><p style="word-wrap:break-word; word-break:break-all;">You have<strong style="padding:0 2px; font-size:18px; color:#fa1801;">${count || 0}</strong>static residence order information that are about to expire. After the agent expires, no renewal fee will be charged. To avoid affecting the normal use of the business, if you need to renew, please go to <span style="color:#157cfb">Proxy Management > Static Residential > Usage Record</span> to renew.</p><p>Wish everything goes well!</p></div>`,
      'Dear User',
      {
        type: 'warning',
        dangerouslyUseHTMLString: true,
        showCancelButton: false,
        showConfirmButton: true,
        cancelButtonText: 'Close',
        confirmButtonText: 'To renew',
        buttonSize: 'large'
      },
    ).then(() => {
      router.push({
        path: '/center/staticResidential',
        query: {
          name: '2',
          status: '2',
          t: new Date().getTime(),
        },
      });
    })
  }

  onMounted(() => {
    nextTick(() => {
      let userInfo = userStore.getUserInfo || {};
      openSoonExpireMessage(userInfo.static_proxy?.soon_expire_count);
    })
  });
</script>

<style scoped lang="scss"></style>
